<template>
	<view class="pages">
		<!-- 视频开始 -->
		<view class="video-box">
			<video autoplay show-loading :src="movieDetailsList.trailer" :poster="movieDetailsList.poster" controls></video>
		</view>
		<!-- 视频结束 -->
		
		<!-- 标题部分开始 -->
		<view class="title-wapper">
			<!-- 左侧图片 -->
			<view class="title-left">
				<image @click="handleNavTo(movieDetailsList.cover)" :src="movieDetailsList.cover" mode="widthFix" class="title-image"></image>
			</view>
			<!-- 右侧文字加评分 -->
			<view class="title-right">
				<view class="title-firstText">
					{{movieDetailsList.name}}
				</view>
				<view class="lastText">
					{{movieDetailsList.basicInfo}}
				</view>
				<view class="lastText">
					{{movieDetailsList.originalName}}
				</view>
				<view class="lastText">
					{{movieDetailsList.totalTime}}
				</view>
				<view class="lastText">
					{{movieDetailsList.releaseDate}}
				</view>
				<!-- 评分 -->
				<view class="scoringBlock">
					<view class="scoringBlock-left">
						<view class="scoringBlock-left-text1">
							综合评分：
						</view>
						<view class="scoringBlock-left-text2">
							{{movieDetailsList.score}}
						</view>
					</view>
					<view class="scoringBlock-right">
						<Starts :startNumber="movieDetailsList.score" :isShow="0"></Starts>
						<view class="scoringBlock-right-text">
							{{movieDetailsList.prisedCounts}} 人点赞
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 标题部分结束 -->
		
		<!-- 分割线开始 -->
		<view class="separate-wapper">
			<view class="separate">
			</view>
		</view>
		<!-- 分割线结束 -->
		
		<!-- 剧情介绍开始 -->
		<view class="main-info-wapper">
			<view class="main-info-title">
				剧情介绍
			</view>
			<view class="main-info">
				{{movieDetailsList.plotDesc}}
			</view>
		</view>
		<!-- 剧情介绍结束 -->
		
		<!-- 演职人员开始 -->
		<view class="main-info1-wapper">
			<view class="main-info1-title">
				演职人员
			</view>
			<scroll-view scroll-x="true" >
				<view class="photo-wapper">
					<view class="photo-box" v-for="(item,index) in MovieDirectorList" :key="index">
						<image :src="item.photo" mode="widthFix" class="photo" @click="handelImages(index,item.photo)"></image>
						<view class="photo-text">
							{{item.name}}
						</view>
						<view class="photo-text2">
							{item.actName}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 演职人员结束 -->
		
		<!-- 剧照开始 -->
		<view class="main-info2-wapper">
			<view class="main-info2-title">
				剧照
			</view>
			<scroll-view scroll-x="true" >
				<view class="stills-wapper">
					<view class="stills-box" v-for="(item,index) in stillsList" :key="index">
						<image @click="lookMe(index)" :src="item" mode="scaleToFill" class="stills-photo"></image>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 剧照结束 -->
	</view>
</template>

<script>
	import Starts from '../../components/Starts.vue'
	export default {
		components:{
			Starts
		},
		data() {
			return {
				trailerId:'',
				movieDetailsList:{},	//电影详情页存储数据数组
				MovieDirectorList:[],	//导演演员存储数组
				stillsList:[]			//剧照存储数组
			}
		},
		
		/* 页面加载完毕执行的生命周期函数 */
		onLoad(e) {
			//获取跳转传递的数据
			this.trailerId=e.trailerId
			this.getMovieDetailsList(this.trailerId)
			this.getMovieDirectorList(this.trailerId)
			this.getMoviePerformerList(this.trailerId)
			console.log(this.trailerId)
		},
		
		methods: {
			/* 创建获取电影详情页数据的方法 */
			getMovieDetailsList(trailerId){
				var listUrl = this.ListUrl
				uni.request({
					url: listUrl + `search/trailer/${trailerId}/?qq=lee77789087`,
					method:"POST",
					success: (request) => {
						this.movieDetailsList = request.data.data
						console.log(this.movieDetailsList)
						this.stillsList = JSON.parse(request.data.data.plotPics)
						console.log(this.stillsList)
					}
				})
			},
			/* 创建获取导演数据的请求方法 */
			getMovieDirectorList(trailerId){
				var listUrl = this.ListUrl
				uni.request({
					url: listUrl + `search/staff/${trailerId}/1?qq=lee77789087`,
					method:"POST",
					success: (request) => {
						this.MovieDirectorList = request.data.data
						console.log(this.MovieDirectorList)
					}
				})
			},
			/* 创建获取演员数据的请求方法 */
			getMoviePerformerList(trailerId){
				var listUrl = this.ListUrl
				uni.request({
					url: listUrl + `search/staff/${trailerId}/2?qq=lee77789087`,
					method:"POST",
					success: (request) => {
						this.MovieDirectorList = [...this.MovieDirectorList,...request.data.data]
						console.log(this.MovieDirectorList)
					}
				})
			},
			
			/* 点击图片全屏预览 */
			handelImages(index,url){
				var urls = []
				for(var i=0;i<this.MovieDirectorList.length;i++){
					var photos = this.MovieDirectorList[i].photo
					urls.push(photos)
				}
				uni.previewImage({
					current:index,
					urls:urls
				})
			},
			lookMe(index){
				console.log(this.stillsList)
				uni.previewImage({
					current:index,
					urls:this.stillsList
				})
			},
			/* 点击图片跳转 */
			handleNavTo(photo){
				var photo = photo
				console.log(photo)
				uni.navigateTo({
					url: `../photo/photo?urls=${photo}`
				})
			}
		},
		onShareAppMessage() {
			
			 return {
			      title: this.movieDetailsList.name,
			      path: '/pages/movieDetailsPage/movieDetailsPage?trailerId=' + this.trailerId
			    }
		},
		onNavigationBarButtonTap(){
			var name = this.movieDetailsList.name
			var img = this.movieDetailsList.cover
			uni.share({
			    provider: "weixin",
			    scene: "WXSceneSession",
			    type: 0,
			    href: "http://localhost:8080/#/pages/movieDetailsPage/movieDetailsPage?trailerId="+ this.trailerId,
			    title: "超英预告《" + name + "》",
			    summary: "超英预告《" + name + "》",
			    imageUrl: img,
			    success: function (res) {
			        console.log("success:" + JSON.stringify(res));
			    },
			    fail: function (err) {
			        console.log("fail:" + JSON.stringify(err));
			    }
			});
		}
	}
</script>

<style>
/* 视频样式开始 */
	.video-box{
		width: 100%;
	}
	.video-box video{
		width: 100%;
	}
/* 视频样式结束 */

/* 标题样式开始 */
	/* 外部盒模型设置 */
	.title-wapper{
		display: flex;
		padding: 20rpx;
	}
	/* 左侧图片大小设置 */
	.title-image{
		width: 280rpx;
	}
	/* 右侧设置 */
	.title-right{
		display: flex;
		flex-direction: column;
		padding: 0 30rpx;
	}
	/* 右侧标题名设置 */
	.title-firstText{
		font-size: 30px;
	}
	.lastText{
		font-size: 13px;
		color: #a9a9a9;
		line-height: 18px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	/* 右侧评分样式 */
	.scoringBlock{
		display: flex;
		width: 360rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		padding: 20rpx;
		margin-top: 25rpx;
		box-shadow: 3px 2px 10px #dedede;
	}
	.scoringBlock-left{
		display: flex;
		flex-direction: column;
		margin-left: 10rpx;
	}
	.scoringBlock-left-text1{
		font-size: 12px;
		color: grey;
	}
	.scoringBlock-left-text2{
		font-size: 26px;
		font-weight: 600;
		color: #feab2a;
		margin-left: 10rpx;
	}
	.scoringBlock-right{
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 20rpx;
	}
	.scoringBlock-right-text{
		font-size: 12px;
		color: gray;
	}
/* 标题样式结束 */

/* 分割线样式设置开始 */
	.separate-wapper{
		padding: 20rpx 20rpx;
	}
	.separate{
		height: 1rpx;
		background-color: #dbdbda;
	}
/* 分割线样式设置结束 */

/* 剧情介绍样式开始*/
	.main-info-wapper{
		padding: 0 20rpx;
		color: #a9a9a9;
		font-size: 14px
	}
	.main-info{
		font-size: 16px;
		color: #000000;
		margin-top: 10rpx;
	}
/* 剧情介绍样式结束 */

/* 演职人员开始 */
	.main-info1-wapper{
		padding: 40rpx 20rpx;
	}
	.main-info1-title{
		color: #a9a9a9;
		font-size: 14px
	}
	.photo-box{
		display: flex;
		flex-direction: column;
		margin-right: 10rpx;
	}
	.photo-wapper{
		display: flex;
	}
	.photo{
		width: 170rpx;
		margin-top: 25rpx;
	}
	.photo-text{
		width: 170rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: center;
		font-size: 15px;
	}
	.photo-text2{
		width: 170rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: center;
		font-size: 13px;
		color: #a9a9a9;
	}
/* 演职人员结束 */

/* 剧照开始 */
	.main-info2-wapper{
		padding: 40rpx 20rpx;
	}
	.main-info2-title{
		color: #a9a9a9;
		font-size: 14px
	}
	.stills-wapper{
		display: flex;
	}
	.stills-photo{
		width: 220rpx;
		height: 320rpx;
	}
	.stills-box{
		padding: 20rpx 20rpx 20rpx 0;
	}
/* 剧照结束 */
</style>
